<template>
     <div class="container">
  <div class="login-page">
    <h2 class="h2">请设置密码</h2>
    <van-form
      @submit="onSubmit"
      validate-trigger="onSubmit"
      ref="passForm"
      :show-error="false"
    >
      <van-cell-group>
        <van-field
          left-icon="lock"
          type="text"
          v-model.trim="passForm.password"
          name="password"
          placeholder="请输入密码"
          :rules="[{ validator: passwordValidator }]"
        />
        <van-field
          left-icon="lock"
          type="text"
          v-model.trim="passForm.repassword"
          name="repassword"
          placeholder="请再次输入您的密码"
          :rules="[{ validator: repasswordValidator }]"
        />
      </van-cell-group>
      <div class="loginIn">
        <van-button   class="loginIn-btn" block type="primary" native-type="submit">
          确定
        </van-button>
      </div>
      <div class="moreInfo">*密码必须8位以上字母和数字组合</div>
    </van-form>
  </div>
</div>
</template>

<script>
import path from '../api/network.js'
import { Toast } from 'vant';
export default {
  data() {
    return {
      passForm: {
        password: "",
        repassword: "",
      },
      passwordPattern:
        // /^(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}$/,
        /^(?![a-zA-Z]+$)(?![0-9]+$)[a-zA-Z0-9]{8,15}$/,
    };
  },
  methods: {
    passwordValidator(val) {
      return new Promise((resolve, reject) => {
        if (val === "") {
          Toast("密码不能为空");
          return resolve(false);
        } else if (val.length < 8) {
          Toast("密码8位或以上");
        } else if (!this.passwordPattern.test(val)) {
          Toast("密码格式不正确！");
          return resolve(false);
        } else {
          return resolve(true);
        }
      });
    },

    repasswordValidator(val) {
      return new Promise((resolve, reject) => {
        if (val === "") {
          Toast("密码不能为空");
          return resolve(false);
        } else if (val.length < 8) {
          Toast("密码8位或以上");
        } else if (val != this.passForm.password) {
          Toast("两次密码不一致！");
        } else if (!this.passwordPattern.test(val)) {
          Toast("密码格式不正确！");
          return resolve(false);
        } else {
          return resolve(true);
        }
      });
    },

    onSubmit(values) {
      //console.log('values====>>>>', values)
      if (values) {
        this.setpas(values);
      } else {
        console.log("error submit!!");
        return false;
      }
    },

     setpas(values) {
      path.resetpw({
       newpw: values.repassword,
      }
      ).then(res => {
        if (res.status == 200) {
            Toast("密码设置成功！");
            setInterval(this.$router.push({name:'login'}), 2000)
        }
      })
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>
